<template>
    <div class="studentTaskBox">
        <!-- <div class="newsOperation clearFix">
            <div class="checkAll floatBtn">
                <el-checkbox :indeterminate="true" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            </div>
            <el-button type="text" class="floatBtn">删除</el-button>
            <el-button type="text" class="floatBtn">未读消息</el-button>
            <el-button type="text" class="floatBtn">全部标记为已读</el-button>
        </div> -->
        <ul class="detailWarp">
            <li class="detailList clearFix" v-for="(item, index) in myTaskP.list" :key="index">
                <!-- <el-checkbox v-model="checkTask" @change="handleCheckChange(item.id)">
                </el-checkbox> -->
                <span class="msgTitle" @click="taskDetails(item)">{{item.taskName}}--{{item.miaoshu}}</span>
                <label class="msgTime" v-if='item.createDate'>{{item.createDate.slice(0,19)}}</label>
            </li>
        </ul>

        <div class="block">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 15, 20, 25]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totals">
            </el-pagination>
        </div>

        <el-dialog title="任务详情" :visible.sync="taskDetailsP" width="450px">
            <ul class="taskWarp">
                <li class="task">
                    <label>任务标题：</label>
                    <span>{{taskCache.taskName}}</span>
                </li>
                <li class="task">
                    <label>任务级别：</label>
                    <span>{{taskCache.taskLevel==1?'普通':taskCache.taskLevel==3?'紧急':'特殊'}}</span>
                </li>
                <!-- <li class="task">
                    <label>创建人：</label>
                    <span>{{taskCache.createUserName}}</span>
                </li> -->
                <li class="task">
                    <label>责任人：</label>
                    <span>{{taskCache.taskChargeName}}</span>
                </li>
                <li class="task">
                    <label>任务开始时间：</label>
                    <span>{{taskCache.endTime}}</span>
                </li>
                <li class="task">
                    <label>任务结束时间：</label>
                    <span>{{taskCache.startTime}}</span>
                </li>
                <li class="task">
                    <label>任务描述：</label>
                    <span>{{taskCache.miaoshu}}</span>
                </li>
            </ul>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="goDone()"><a target="_black" :href="taskCache.baseUrl+'/home?userId='+ userInfo.id+''">去完成</a></el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        mapState
    } from "vuex";
    export default {
        computed: {
            ...mapState({
                // 用户详细信息
                userInfo: state => state.userModule.userInfo,
            })
        },
        created(){
            this.myTask()
        },
        data(){
            return{
                checkAll:false,
                check:false,
                checkTask: [],
                currentPage:1,
                pageSize: 10,
                totals:0,
                taskDetailsP:false,
                myTaskP:{},
                taskCache:{}
            }
        },
        methods:{
            handleCheckChange(params) {
                if (this.checkTask.length == this.myTaskP.list.length) {
                    this.isIndeterminate = true
                } else {
                    this.isIndeterminate = false
                }
            },
            // 全选框选择时触发
            handleCheckAllChange(params) {
                if (params) {
                    this.isIndeterminate = true
                    this.check = this.myTaskP.list
                } else {
                    this.check = []
                    this.isIndeterminate = false
                }
            },
            goDone(){
                this.taskDetailsP = false
            },
            taskDetails(params){
                this.taskCache = params
                this.taskDetailsP = true
            },
            myTask(){
                this.$store.dispatch('commonModule/myTask',{
                    limit: this.pageSize,
                    page: this.currentPage
                }).then(res =>{
                if(res){
                    this.totals = res.total
                    this.myTaskP =res
                }
            })
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.myTask()
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.myTask()
            }
        }
    }
</script>

<style lang="scss" scoped>
.studentTaskBox{
    box-sizing: border-box;
    background-color: white;
    min-height: calc(100vh - 534px);
    padding-bottom: 5px;
    .newsOperation{
        box-sizing: border-box;
        padding: 5px 15px;
        background-color: #CCEEFF;
        text-align: left;
        div.checkAll{
            margin-top: 10px;
            margin-right: 20px;
        }
        .floatBtn{
            float: left;
            margin-right: 10px;
        }
    }

    .detailWarp{
        box-sizing: border-box;
        padding-bottom: 5px;
        .detailList{
            user-select: none;
            padding: 10px 15px;
            box-sizing: border-box;
            background-color: #F2F6FC;
            text-align: left;
            font-size: 14px;
            color: #303133;
            margin-bottom: 10px;
            span{
                cursor: pointer;
            }
            .msgTime{
                display: block;
                float: right;
                font-size: 12px;
                color: #909399;
                margin-top: 3px;
            }
        }
    }

    .taskWarp{
        .task{
            box-sizing: border-box;
            padding: 0 10px;
            padding-bottom: 10px;
            text-align: justify;
            margin-bottom: 10px;
            border-bottom: 1px solid #ccc;
        }
    }

    ul{
        margin-block-start: 0;
        margin-block-end: 0;
        padding-inline-start: 0;
        list-style-type: none;
    }

    .block{
        margin: 20px 0;
    }

    .clearFix::after{
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }
}
</style>